<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物料组成设计单查询</title>
    <link rel="stylesheet" href="../../css/pintuer.css">
    <link rel="stylesheet" href="../../css/admin.css">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <style>
        input{
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: black solid 1px;
        }
        table{
            border: 1px;
            cell-padding:0;
            cell-spacing:0;
            width: 80%;
            margin-top: 20px;
        }
        table thead{
            background-color:#b3d7ff ;
        }
        a{
            cursor: pointer;
        }
    </style>
</head>
<body>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table1.15.3.js"></script>
<script>
    $(function () {
        $.ajax({
            url:'/design/selectDesign.action',
            type:'post',
            dataType:'json',
            success:function (data) {
                var tb = $('#tb_com');
                tb.empty();
                for( var i=0;i<data.length;i++){
                    var tr=$("<tr>");

                    var designId = $("<td>");
                    var a = $("<a href='../materiel.html?id="+data[i].id+"'>").text(data[i].designId);
                    designId.append(a);
                    tr.append(designId);

                    var pid =$("<td>").text(data[i].productId);
                    tr.append(pid);

                    var pName =$("<td>").text(data[i].productName);
                    tr.append(pName);

                    var state = $('<td>').text(data[i].checkTag==="S001-1"?"通过":(data[i].checkTag==="S001-2"?"不通过":"等待"));
                    tr.append(state);

                    var t = $("<td>");
                    var a = $("<a onclick='btn("+data[i].id+")' style='color: #33bbdd;'>").text("装配树");
                    t.append(a);
                    tr.append(t);

                    tb.append(tr);

                }
            }
        });

    })

    function btn(id) {
        $.ajax({
            url:'/design/selectDetail.action',
            type:'post',
            dataType:'json',
            data:'id='+id,
            success:function (data) {
                $('#materielModal').modal("show");
                var tb = $('#tbody');
                tb.empty();
                for( var i = 0 ; i < data.length ; i++ ){

                    var trObj = $('<tr>');

                    var pid = $('<td>').text(data[i].productId);
                    trObj.append(pid);

                    var pName = $('<td>').text(data[i].productName);
                    trObj.append(pName);

                    var type = $('<td>').text(data[i].type==="Y001-1"?"商品":"物料");
                    trObj.append(type);


                    var tdAmount = $('<td>').text(data[i].amount);
                    trObj.append(tdAmount);

                    var amountUnit = $('<td>').text(data[i].amountUnit);
                    trObj.append(amountUnit);

                    var costPrice = $('<td>').text(data[i].costPrice);
                    trObj.append(costPrice);

                    var subtotal = $('<td>').text(data[i].subtotal);
                    trObj.append(subtotal);

                    tb.append(trObj);
                }
            }
        });


    }
</script>
<table style="text-align: center;" class="table table-bordered table-hover table-striped table-condensed">
    <thead>
    <tr>
        <th>设计单编号</th>
        <th>产品编号</th>
        <th>产品名称</th>
        <th>审核状态</th>
        <th>装配树</th>
    </tr>
    </thead>
    <tbody id="tb_com">
    </tbody>
</table>

<div class="modal  fade" id="materielModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 90%">
        <div class="modal-content" style="border: 1px solid black;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px"></button>
            </div>
            <div class="modal-body">
                <table id="materialTableInfo" width="60%" class="table table-sm thead-light" style="text-align: center;">
                    <thead>
                    <tr>
                        <th>物料编号</th>
                        <th>物料名称</th>
                        <th>用途类型</th>
                        <th>数量</th>
                        <th>单位</th>
                        <th>单价（元）</th>
                        <th>小计</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>